<template>
  <div>
    <!-- news.html 12-40 -->
    <!--面包屑导航-->
    <div class="breadcrumb">
      <div class="container">
        <h2><a href="">首页</a>&gt;<a href="">公司动态</a></h2>
      </div>
    </div>
    <!--页面主体-->
    <div class="main container" v-if="data">
      <div class="news">
        <ul>
          <li v-for="item in data.data" :key="item.nid">
            <span>{{ item.pubTime | date }}</span>
            <router-link :to="`/news_details/${item.nid}`">{{ item.title }}</router-link>
          </li>
          <!--<li><span>2016-02-21</span><a href="">净美仕新风净化系统　助力校园新风行动</a></li>-->
          <!--<li><span>2016-02-21</span><a href="">全国新风行动全面启动 助推净美仕战略升级</a></li>-->
          <!--<li><span>2016-02-21</span><a href="">智能空气净化器翻盘：净美仕能否领衔?</a></li>-->
        </ul>
      </div>
      <!-- 分页导航-->
      <div class="pages">
        <a
          @click="getData(data.pageNum - 1)"
          :class="{ default: data.pageNum == 1 }"
          >上一页</a
        >
        <!--<a href="" class="cur">1</a>-->
        <a
          @click="getData(item)"
          :class="{ cur: item == data.pageNum }"
          v-for="item in data.pageCount"
          :key="item"
          >{{ item }}</a
        >
        <!--<a href="">3</a>-->
        <!--<a href="">4</a>-->
        <!--<a href="">5</a>-->
        <a
          @click="getData(data.pageNum + 1)"
          :class="{ default: data.pageNum == data.pageCount }"
          >下一页</a
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // data:  存储本地数据  存储这里变量才可以在template中使用
  data() {
    return {
      // 初始化数据
      data: null,
    };
  },
  // mounted 挂载时 一般请求写在这里
  mounted() {
    this.getData(1);
  },
  // methods: 存放各种方法
  methods: {
    getData(page) {
      const url = "news_select.php?pageNum=" + page;
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
  // 过滤器
  // filters: {
  //   date(timestamp) {
  //     // *1:参数必须为数字类型 传入的默认是字符串  *1转换为数字
  //     let d = new Date(timestamp * 1);
  //     // 月份取值为0-11 +1变成 1-12
  //     return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
  //   },
  // },
};
</script>
<style lang="scss">
.pages {
  // 鼠标小手
  cursor: pointer;
  // 文本无法被选中
  user-select: none;
  .default {
    // 没有鼠标事件 不能够点击
    pointer-events: none;
  }
}
</style>
